
<!-- element ui el-table 多层嵌套 -->
<template>
 <div>
  <el-table :data="tableData"
    style="width: 100%">
    <el-table-column style="align-items: center;justify-content:center;" type="expand">
      <template slot-scope="props">
          <el-table :data="props.row.list"
              style="width: 100%">
                <el-table-column
                  label="明细ID"
                  prop="id">
                </el-table-column>
                <el-table-column
                  label="明细名称"
                  prop="name">
                   <template slot-scope="{row}">
                    当前数据：{{row}}<br>父级数据：{{props.row}}
                   </template>
                </el-table-column>
            </el-table>
      </template>
    </el-table-column>
    <el-table-column
      label="商品 ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="name">
    </el-table-column>
  </el-table>

 </div>
</template>

<script>
export default {
  name: 'demo2',
  components: {},
  props: {
  },
  data() {
    return {
      tableData: [
        {
          id: '1',
          name: '测试1',
          list: [
            {
                id: '1',
                name: '测试明细1',
            }
          ]
        }
      ]
    }
  },
  methods: {
  }
}
</script>
<style scoped>
.a{
  text-align: center;
}
</style>